<script setup lang="ts">
import store from '@/store'
import { ref, reactive, createVNode } from 'vue'
import { Modal } from 'ant-design-vue'
import IconFont from '@/components/IconFont/index.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'

const itemRef = reactive({})

const modal = reactive({
  title: '填写校验',
  open: false
})

const type = ref('')

const ruleList = ref([])
const modelForm = ref(null)

const init = (item) => {
  console.log(item)
  modelForm.value?.clearValidate()

  type.value = item.type
  if (item.rules) {
    ruleList.value = item.rules
  } else {
    ruleList.value = []
  }
  modal.open = true
}

const del = (index, item) => {
  item.splice(index, 1)
}

const add = (mode) => {
  switch (mode) {
    case 'required':
      if (ruleList.value.some((v) => v.mode == 'required')) {
        Modal.warning({
          title: '警告',
          icon: createVNode(ExclamationCircleOutlined),
          content: '必填校验最多只能设置一条！'
        })
      } else {
        ruleList.value.unshift({
          mode: 'required',
          required: true,
          message: '',
          trigger: ['change', 'blur']
        })
      }
      break
    case 'number':
      ruleList.value.push({
        mode: 'number',
        type: 'number',
        min: '',
        max: '',
        message: '',
        trigger: ['change', 'blur']
      })
      break
    // case 'len':
    //   if (type.value.includes('多')) {
    //     ruleList.value.push({
    //       mode: 'len',
    //       type: 'array',
    //       min: '',
    //       max: '',
    //       message: '',
    //       trigger: ['change', 'blur']
    //     })
    //   } else {
    //     ruleList.value.push({
    //       mode: 'len',
    //       type: 'string',
    //       min: '',
    //       max: '',
    //       message: '',
    //       trigger: ['change', 'blur']
    //     })
    //   }
    //   break
    case 'regexp':
      ruleList.value.push({
        mode: 'regexp',
        type: 'string',
        pattern: '',
        patternStr: '',
        message: '',
        trigger: ['change', 'blur']
      })
      break
    default:
      break
  }
}

const validator_number = async (_, value) => {
  const reg = new RegExp(/^\d*$/)

  if (!value.max.length && !value.min.length) {
    return Promise.reject('最大值和最小值最少填写一项')
  } else if (value.max.length && !reg.test(value.max)) {
    return Promise.reject('请输入数字')
  } else if (value.min.length && !reg.test(value.min)) {
    return Promise.reject('请输入数字')
  } else {
    return Promise.resolve()
  }
}

const confirm = () => {
  modelForm.value.validate().then(() => {
    ruleList.value.map((v) => {
      if (v.mode === 'regexp') {
        v.pattern = new RegExp(v.patternStr)
      }
    })

    console.log(ruleList.value)

    emit('onConfirm', ruleList.value)

    modal.open = false
  })
}

const emit = defineEmits(['onConfirm'])

defineExpose({
  init
})
</script>

<template>
  <a-modal
    width="720px"
    :bodyStyle="store.userStore.bodyStyle"
    v-model:open="modal.open"
    :title="modal.title"
    ok-text="确认"
    :maskClosable="false"
  >
    <div class="modal-content" style="min-height: 400px">
      <a-form class="modelForm" ref="modelForm" :model="ruleList">
        <a-form-item>
          <a-dropdown>
            <a-button @click.prevent>添加规则</a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a href="javascript:;" @click="add('required')">必填</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;" @click="add('number')">数字大小</a>
                </a-menu-item>
                <!--                <a-menu-item>-->
                <!--                  <a href="javascript:;" @click="add('len')">长度</a>-->
                <!--                </a-menu-item>-->
                <a-menu-item>
                  <a href="javascript:;" @click="add('regexp')">正则</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-form-item>
        <template v-for="(item, index) in ruleList" :key="index">
          <template v-if="item.mode === 'required'">
            <a-row class="row">
              <a-col :span="4">
                <div class="label">必填校验</div>
              </a-col>
              <a-col :span="19">
                <a-form-item
                  :name="[index, 'message']"
                  :rules="{
                    required: true,
                    message: '异常文案不能为空',
                    trigger: 'change'
                  }"
                >
                  <a-input v-model:value="item.message" autocomplete="off" placeholder="异常文案" />
                </a-form-item>
              </a-col>
              <a-col class="ft" :span="1">
                <icon-font class="icon-del" type="icon-shanchu" @click="del(index, ruleList)" />
              </a-col>
            </a-row>
          </template>
          <template v-else-if="item.mode === 'number'">
            <a-row class="row">
              <a-col :span="4">
                <div class="label">数值校验</div>
              </a-col>
              <a-col :span="19">
                <a-space>
                  <a-form-item
                    :name="[index]"
                    :ref="(el) => (itemRef['c_' + index] = el)"
                    :rules="{
                      validator: validator_number,
                      trigger: 'change'
                    }"
                  >
                    <a-space>
                      <a-input
                        style="width: 120px"
                        v-model:value="item.min"
                        autocomplete="off"
                        placeholder="最小值(包含)"
                      />
                      <a-form-item-rest>
                        <a-input
                          style="width: 120px"
                          v-model:value="item.max"
                          @change="itemRef['c_' + index].onFieldChange()"
                          autocomplete="off"
                          placeholder="最大值(不包含)"
                        />
                      </a-form-item-rest>
                    </a-space>
                  </a-form-item>
                  <a-form-item
                    :name="[index, 'message']"
                    :rules="{
                      required: true,
                      message: '异常文案不能为空',
                      trigger: 'change'
                    }"
                  >
                    <a-input
                      v-model:value="item.message"
                      autocomplete="off"
                      placeholder="异常文案"
                    />
                  </a-form-item>
                </a-space>
              </a-col>
              <a-col class="ft" :span="1">
                <icon-font class="icon-del" type="icon-shanchu" @click="del(index, ruleList)" />
              </a-col>
            </a-row>
          </template>
          <!--          <template v-else-if="item.mode === 'len'">-->
          <!--            <a-row class="row">-->
          <!--              <a-col :span="4">-->
          <!--                <div class="label">长度校验</div>-->
          <!--              </a-col>-->
          <!--              <a-col :span="19">-->
          <!--                <a-space>-->
          <!--                  <a-form-item>-->
          <!--                    <a-input-->
          <!--                      style="width: 120px"-->
          <!--                      v-model:value="item.min"-->
          <!--                      autocomplete="off"-->
          <!--                      placeholder="最短(包含)"-->
          <!--                    />-->
          <!--                  </a-form-item>-->
          <!--                  <a-form-item>-->
          <!--                    <a-input-->
          <!--                      style="width: 120px"-->
          <!--                      v-model:value="item.max"-->
          <!--                      autocomplete="off"-->
          <!--                      placeholder="最长(不包含)"-->
          <!--                    />-->
          <!--                  </a-form-item>-->
          <!--                  <a-form-item>-->
          <!--                    <a-input-->
          <!--                      v-model:value="item.message"-->
          <!--                      autocomplete="off"-->
          <!--                      placeholder="异常文案"-->
          <!--                    />-->
          <!--                  </a-form-item>-->
          <!--                </a-space>-->
          <!--              </a-col>-->
          <!--              <a-col class="ft" :span="1">-->
          <!--                <icon-font class="icon-del" type="icon-shanchu" @click="del(index, ruleList)" />-->
          <!--              </a-col>-->
          <!--            </a-row>-->
          <!--          </template>-->
          <template v-else-if="item.mode === 'regexp'">
            <a-row class="row">
              <a-col :span="4">
                <div class="label">正则校验</div>
              </a-col>
              <a-col :span="19">
                <a-space>
                  <a-form-item
                    :name="[index, 'patternStr']"
                    :rules="{
                      required: true,
                      message: '正则不能为空',
                      trigger: 'change'
                    }"
                  >
                    <a-input
                      style="width: 120px"
                      v-model:value="item.patternStr"
                      autocomplete="off"
                      placeholder="正则(不带//)"
                    />
                  </a-form-item>
                  <a-form-item
                    :name="[index, 'message']"
                    :rules="{
                      required: true,
                      message: '异常文案不能为空',
                      trigger: 'change'
                    }"
                  >
                    <a-input
                      v-model:value="item.message"
                      autocomplete="off"
                      placeholder="异常文案"
                    />
                  </a-form-item>
                </a-space>
              </a-col>
              <a-col class="ft" :span="1">
                <icon-font class="icon-del" type="icon-shanchu" @click="del(index, ruleList)" />
              </a-col>
            </a-row>
          </template>
        </template>
      </a-form>
    </div>
    <template #footer>
      <a-button @click="modal.open = false">取消</a-button>
      <a-button key="submit" type="primary" @click="confirm">确定</a-button>
    </template>
  </a-modal>
</template>

<style scoped lang="less">
.label {
  height: 47px;
  line-height: 32px;
  font-weight: bold;
}
.row {
  .ft {
    height: 47px;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    .icon {
      line-height: 32px;
      height: 32px;
    }
  }
}
.icon-plus,
.icon-del {
  font-size: 16px;
}
.icon-plus {
  color: #165dff;
}
.icon-del {
  color: #f53f3f;
}
</style>
